<%--
  Created by IntelliJ IDEA.
  User: yangtao
  Date: 2021-09-01
  Time: 16:54
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="description"
          content="Vali is a responsive and free admin theme built with Bootstrap 4, SASS and PUG.js. It's fully customizable and modular.">
    <title>川东钻探-技术服务量化考核</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Main CSS-->
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/css/main.css">
    <!-- Font-icon css-->
    <link rel="stylesheet" type="text/css"
          href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css"
          href="${pageContext.request.contextPath}/static/css/bootstrap-datetimepicker.min.css" media="screen">
    <!-- DataTables CSS -->
    <link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.21/css/jquery.dataTables.css">
</head>
<body class="app sidebar-mini">
<!-- Navbar-->
<header class="app-header"><a class="app-header__logo" href="#">match</a>
    <!-- Sidebar toggle button--><a class="app-sidebar__toggle" href="#" data-toggle="sidebar"
                                    aria-label="Hide Sidebar"></a>
    <!-- Navbar Right Menu-->
    <ul class="app-nav">
    </ul>
</header>
<!-- Sidebar menu-->
<div class="app-sidebar__overlay" data-toggle="sidebar"></div>
<aside class="app-sidebar">
    <div class="app-sidebar__user">
        <div>
            <p class="app-sidebar__user-name">杨涛</p>
            <p class="app-sidebar__user-designation">2020201001</p>
        </div>
    </div>
    <ul class="app-menu">
        <li class="treeview">
            <a id="selectcase" class="app-menu__item active" href="#" data-toggle="treeview"
               onclick="changeTreeView(this);">
                <i class="app-menu__icon fa fa-th-list"></i>
                <span class="app-menu__label">技术创新</span>
                <i class="treeview-indicator fa fa-angle-right"></i>
            </a>
            <ul class="treeview-menu">
                <li>
                    <a id="add_project_tech_innov" class="treeview-item" href="#" onclick="changeItem(this)">
                        <i class="icon fa fa-circle-o"></i>
                        新增项目
                    </a>
                </li>
                <li>
                    <a id="project_manage_tech_innov" class="treeview-item" href="#" onclick="changeItem(this)">
                        <i class="icon fa fa-circle-o"></i>
                        考核项目
                    </a>
                </li>
                <li>
                    <a id="score_detail_tech_innov" class="treeview-item" href="#" onclick="changeItem(this)">
                        <i class="icon fa fa-circle-o"></i>
                        分数明细
                    </a>
                </li>
            </ul>
        </li>
        <li class="treeview">
            <a id="" class="app-menu__item" href="#" data-toggle="treeview"
               onclick="changeTreeView(this);">
                <i class="app-menu__icon fa fa-th-list"></i>
                <span class="app-menu__label">数据管理</span>
                <i class="treeview-indicator fa fa-angle-right"></i>
            </a>
            <ul class="treeview-menu">
                <li>
                    <a id="staff_manage" class="treeview-item" href="#" onclick="changeItem(this)">
                        <i class="icon fa fa-circle-o"></i>
                        员工管理
                    </a>
                </li>
            </ul>
        </li>
    </ul>
</aside>
<main class="app-content">


</main>

<!-- Essential javascripts for application to work-->
<script src="${pageContext.request.contextPath}/static/js/jquery-3.3.1.min.js"></script>
<script src="${pageContext.request.contextPath}/static/js/popper.min.js"></script>
<script src="${pageContext.request.contextPath}/static/js/bootstrap.min.js"></script>
<%--<script src="${pageContext.request.contextPath}/static/js/main.js"></script>--%>
<!-- The javascript plugin to display page loading on top-->
<%--<script src="${pageContext.request.contextPath}/static/js/plugins/pace.min.js"></script>--%>
<!-- Page specific javascripts-->
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/plugins/chart.js"></script>
<script type="text/javascript"
        src="${pageContext.request.contextPath}/static/js/plugins/bootstrap-datepicker.min.js"></script>

<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/plugins/select2.min.js"></script>
<script type="text/javascript"
        src="${pageContext.request.contextPath}/static/js/plugins/bootstrap-datetimepicker.js"></script>
<script type="text/javascript"
        src="${pageContext.request.contextPath}/static/js/plugins/locales/bootstrap-datetimepicker.zh-CN.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/plugins/sweetalert.min.js"></script>
<!-- Data table plugin-->
<script type="text/javascript" src="${ctx}/static/js/plugins/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="${ctx}/static/js/plugins/dataTables.bootstrap.min.js"></script>

<script type="text/javascript">
    <%--$(".app-content").load("${ctx}/dashboard");--%>

    /*left change function */
    function changeItem(object) {
        var obj = $(object);
        $.get("${ctx}/" + obj.attr("id"), function (result) {
            $(".app-content").html(result);
            $(".treeview-item.active").removeClass("active");
            $("#" + obj.attr("id")).addClass("active")
        });
    }

    /*left change root tree item*/
    function changeTreeView(object) {
        var obj = $(object);
        if (!obj.parent().hasClass("is-expanded")) {
            $(".treeview.is-expanded").removeClass("is-expanded");
            obj.parent().addClass("is-expanded");
            $(".app-menu__item.active").removeClass("active");
            $(obj).addClass("active")
        } else {
            obj.parent().removeClass("is-expanded");
        }
        /*if ($(".treeview.is-expanded").length != 0) {
            $(".treeview.is-expanded").removeClass("is-expanded");
        }
        if (!obj.is(treeViewObject)) {
            obj.parent().addClass("is-expanded");
        }
        treeViewObject = obj;*/
    }


    var data = {
        labels: ["January", "February", "March", "April", "May"],
        datasets: [
            {
                label: "My First dataset",
                fillColor: "rgba(220,220,220,0.2)",
                strokeColor: "rgba(220,220,220,1)",
                pointColor: "rgba(220,220,220,1)",
                pointStrokeColor: "#fff",
                pointHighlightFill: "#fff",
                pointHighlightStroke: "rgba(220,220,220,1)",
                data: [65, 59, 80, 81, 56]
            },
            {
                label: "My Second dataset",
                fillColor: "rgba(151,187,205,0.2)",
                strokeColor: "rgba(151,187,205,1)",
                pointColor: "rgba(151,187,205,1)",
                pointStrokeColor: "#fff",
                pointHighlightFill: "#fff",
                pointHighlightStroke: "rgba(151,187,205,1)",
                data: [28, 48, 40, 19, 86]
            }
        ]
    };
    var pdata = [
        {
            value: 300,
            color: "#46BFBD",
            highlight: "#5AD3D1",
            label: "Complete"
        },
        {
            value: 50,
            color: "#F7464A",
            highlight: "#FF5A5E",
            label: "In-Progress"
        }
    ];



</script>


</body>
</html>

